<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import tableData from '/src/json/echats1.json';



const run = (_rawData) => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
    const countries = [
        'Finland',
        'France',
        'Germany',
        'Iceland',
        'Norway',
        'Poland',
        'Russia',
        'United Kingdom'
    ];
    const datasetWithFilters = [];
    const seriesList = [];
    echarts.util.each(countries, function (country) {
        var datasetId = 'dataset_' + country;
        datasetWithFilters.push({
            id: datasetId,
            fromDatasetId: 'dataset_raw',
            transform: {
                type: 'filter',
                config: {
                    and: [
                        { dimension: 'Year', gte: 1950 },
                        { dimension: 'Country', '=': country }
                    ]
                }
            }
        });
        seriesList.push({
            type: 'line',
            datasetId: datasetId,
            showSymbol: false,
            name: country,
            endLabel: {
                show: true,
                formatter: function (params) {
                    return params.value[3] + ': ' + params.value[0];
                }
            },
            labelLayout: {
                moveOverlap: 'shiftY'
            },
            emphasis: {
                focus: 'series'
            },
            encode: {
                x: 'Year',
                y: 'Income',
                label: ['Country', 'Income'],
                itemName: 'Year',
                tooltip: ['Income']
            }
        });
    });
    // ... （之前的代码保持不变）

    option = {
        animationDuration: 10000,
        dataset: [
            {
                id: 'dataset_raw',
                source: _rawData
            },
            ...datasetWithFilters
        ],
        title: {
            text: 'Income of Selected Countries since 1950'
        },
        tooltip: {
            order: 'valueDesc',
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            nameLocation: 'middle',
            data: _rawData.map(item => item.Year) // 确保X轴数据统一，这里直接从原始数据获取年份
        },
        grid: {
            top: 60,
            right: 140,
            bottom: 60,
            containLabel: true,
            show: true,
            backgroundColor: '#f0f0f0',
            borderWidth: 1,
            borderColor: '#ccc'
        },
        yAxis: [], // 初始化一个空的yAxis数组
        yAxis: [], // 初始化一个空的yAxis数组
        series: seriesList.map((series, index) => {
            // 确保yAxis数组长度至少为当前index + 1，如果不足则添加新配置
            while (option.yAxis.length <= index) {
                option.yAxis.push({
                    type: 'value',
                    name: series.name, // Y轴标签为国家名
                    position: 'right', // 将每个Y轴置于右侧
                    offset: (index + 1) * 60, // 更新偏移量计算逻辑，避免初始值为0时的计算错误
                });
            }

            return {
                ...series,
                yAxisIndex: index, // 指定当前系列使用的Y轴索引
            };
        })
    };

    // 假设只有一个图表实例myChart，需要调整或创建多个图表实例以适应每个系列
    myChart.setOption(option);
}



onMounted(() => {
    run(tableData);
})
</script>

<template>
    <div id="main" style="width: 800px;height: 600px;"></div>
</template>

<style scoped></style>
